@import "bootstrap/bootstrap.less";
@import "bootstrap/responsive.less";
@import "comments.less";
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

// Color
@colorBackground: #e5e5e5;
@colorNavBarTop: #2b9ec3;
@colorNavBarBot: #177897;
@colorCyan: #62b2b3;
@colorGreenSteel: #0ED284;
@colorGrey: #fefefe;
@colorGreyD: #F9F9F9; 
@colorSideBar: #F0EDEB;

// Border
@borderWidth: 1px;
@borderColor: #ccc;
@borderColorDark: #444;

// Padding
@paddingSmall: 10px;
@paddingMedium: 20px;
@paddingLarge: 30px;

// Padding offset 
@paddingMain: @paddingMedium;
@paddingOffset: 2*@column* (@paddingMain + @borderWidth) ;
@column: 2;

@columnWidth: 70px;
@gutterWidth: @paddingMedium;

// Height 
@heightNavFixed: 40px;
@heightNavSecond: 60px;
@heightFooter: 28px;

// Width
@widthSideBar: (2*100%)/12;

// Box-shadow
@boxShadowInset: 0 1px 3px #000 inset, 0 -1px 3px #000 inset;
@boxShadowInsetLight: 0 1px 2px #aaa inset, 0 -1px 2px #aaa inset;

//****************************** General Style for all pages **********************************
//
// This section contains styles for all pages
// Things like Navigation bar (primary + secondary), Box-model, etc.
//
//******************************************************************************************

// Fix certain responsive behavior
// Padding top for body if reach 980px, cause fix-bar will become static
@media (min-width: 980px) {
  body{
    padding-top: @heightNavFixed;
  }
}
@media (max-width: 979px) {
  .navbar-fixed-top {
    margin-bottom: 0;
  }
  .navbar-fixed-top .navbar-inner  .container-fluid{
    .padded-horizon();
  }
  // Side bar 
  body .sidebar-nav{position: static; width:100%;}
  body .navbar #logo { border: none;}
}

//-------------------- --------------------- Padding Mixins ------------------------------------
.padded-left {
  padding-left: @paddingMain;
}
.padded-span (@paddingH : @paddingMedium, @paddingV : @paddingSmall ){
  padding-left: @paddingH;
  padding-right: @paddingH;
  padding-bottom: @paddingV;
  padding-top: @paddingV;
}
.padded-vertical (@padding: @paddingMain) {
  padding-top: @padding;
  padding-bottom: @padding;
}
.padded-horizon (@padding : @paddingMain) {
  padding-left: @padding;
  padding-right: @padding;
}
.width100 {
  width:100%;
}

.spanFull {
  margin-left: 20px;
  width: 100%;
}
//-----------------------------------  Box shadow mixins -----------------------------
.inset {
  .box-shadow(@boxShadowInsetLight);
}
.editable-input{
  background-color: transparent;
  background-image: none;
  border: none;
  margin:0 0 3px 0;
  .box-shadow(none);
  &:focus {
    color: #777;
    border-style: solid;
    border-width: 1px;
    border-color: lighten(@colorNavBarTop,10%);
    .box-shadow(none);
  }
  &:hover {
    border-style: solid;
    border-width: 1px;
    border-color: lighten(@colorNavBarTop,10%);
  }
}

//----------------------------------- Box Model Mixins -------------------------------------------
.borderBox {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

.contentBox {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; 
}

//-------------------- -------------Editable for inpage editing---------------------------------
.editable {
  display: inline-block;
  @transition: border linear .2s, box-shadow linear .2s;
  .transition(@transition);
  
  &:focus {
    
    padding: 5px;
    padding-left: 0;
    background-color: white;
    border-color: rgba(82,168,236,.8);
    @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    .box-shadow(@shadow);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
  }
  &:hover { 
     padding: 5px;
     padding-left: 0;
     border: 1px solid #ccc;
    .border-radius(3px);
  }
}

.full-height {height:100%;}

 //--------------------------------------  Icons -------------------------------------------
.icon-join, .icon-invite, .icon-watch {
  background-position: 3px;
}
.icon-join {
  background-image: url("../img/icon-join.png");
  width: 22px;
}
.icon-invite {
  background-image: url("../img/icon-invite.png");
  width: 18px;
}
.icon-watch {
  background-image: url("../img/icon-watch.png");
  width: 18px;
}
//================================= Layout Element ========================================
// Body
html, body{height: 100%;}
body {background-image: url("../img/body-event-tt.png"); background-color: lighten(@colorBackground,10%); font-family: 'Amaranth' !important; font-style: normal; font-weight: 400; padding-left: 0; padding-right: 0; #grid > .core(@columnWidth,@gutterWidth);}

//----- Footer-----
footer {position: fixed; bottom: 0; width: 100%; z-index: 1030; height: @heightFooter; #gradient > .vertical(darken(@colorGrey,15%),@colorGrey); .padded-horizon(); .padded-vertical(5px); .box-shadow(0 -1px 3px #888); >p{margin: 0}}
.sidebar-nav {position: fixed; margin-bottom: 2px; min-height: 100%; padding-left: 0; padding-right:0; background: @colorSideBar; #grid > .fluid .span(2);}


//============================= Box-Model =======================================
// Apply border box model for all element
* { .borderBox();}

// Fix input text for box model
input, textarea, select, .uneditable-input {height: 24px;}

// No border-box model for fancy box
.fancybox-wrap  {.contentBox(); padding: @paddingMedium;}

//=============================  Nav Bars =======================================

// Header
header{
  background-color: white; margin-bottom: @paddingMedium; padding: @paddingMedium;
  h1,h2,h3,h4,h5 {color: #1db0df;}
}

// Navigation bar class (general)
.navbar {
  // Right buttons  
  .nav.pull-right .btn {width: 28px; height: 28px; padding: 0;}
  
  // Logo
  #logo {display: inline; float: left; font-size: 20px; font-weight: 200; line-height: @heightNavFixed; padding-left: @paddingMain; margin-right: @paddingMain; border-right: 1px solid darken(@colorNavBarTop,10%); #grid > .fluid.span(2);
    >a {color: white; text-decoration: none;}
  } 
}

// Primary bar 
.navbar-fixed-top {min-height: @heightNavFixed; #gradient > .vertical(@colorNavBarTop,@colorNavBarBot);}
 
// Secondary bar 
.navbar-fixed-top.secondary {z-index: 1020; top: @heightNavFixed;}

// Navbar inner style for primary bar
.navbar-inner {padding: 0 20px; border-bottom: 1px solid #444; background: url("../img/nav-main-tt.png") repeat; .border-radius(4px); .box-shadow(0 1px 3px #000);
  
  // Style navbar embedded button
  .nav > li > a {color: white;
    &:hover {#gradient > .vertical(darken(@colorNavBarTop,10%), darken(@colorNavBarBot,10%)); .box-shadow(0 0 5px #555 inset);}
  }
  .nav > li.active > a {#gradient > .vertical(darken(@colorNavBarTop,20%), darken(@colorNavBarBot,20%)); .box-shadow(0 0 5px #333 inset);}
}
  
// Inner style for secondary bar
.navbar-inner.secondary { #gradient > .vertical(#fff, darken(#fff,10%)); .box-shadow(0 1px 4px rgba(0,0,0,0.8)); height: @heightNavSecond; border-top: 1px solid #eee;}

 // Searchbar

.navbar-search {
  .icon-search {position: absolute; top: 5px; left: 8px; background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png");}
  .search-query {padding: 5px 10px 5px 28px; margin-left: 0; height: 30px; background-color: white; border: 1px solid #888;}
  .search-query:focus, .search-query.focused {padding-left: 30px;}
}

.search-query:focus + .icon-search {background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png");}

// Side bar 
.sidebar-nav .nav-header {color: #555;}
 




